<template>
    <div class="outDiv">
      <div class="leftButtons">
        <div class="leftButton" @click="dialogVisible=true">
          <div class="icon"><i class="el-icon-user-solid"></i></div>
          <div class="content">登陆</div>
        </div>
        <div class="leftButton" @click="registerdialogVisible=true">
          <div class="icon"><i class="el-icon-user"></i></div>
          <div class="content">注册</div>
        </div>
        <div class="leftButton">
          <div class="icon"><i class="el-icon-zoom-in"></i></div>
          <div class="content">查询</div>
        </div>
        <div class="leftButton">
          <div class="icon"><i class="el-icon-chat-round"></i></div>
          <div class="content">联系我们</div>
        </div>
      </div>
      <div class="rightImg">
        <div class="myImg">
           <el-image :src="src"></el-image>
        </div>
      </div>
      <div class="right">
        <div class="rightInformation">
          <el-row :span="50">
            <el-col>
              <el-menu
                default-active="2">
              <el-menu-item index="1">
                  <i class="el-icon-search"></i>
                  <span slot="title">资源搜索</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <i class="el-icon-reading"></i>
                  <span slot="title">通知公告</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-table-lamp"></i>
                  <span slot="title">服务指南</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-reading"></i>
                  <span slot="title">我的图书馆</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog
        title="用户登录" :visible.sync="dialogVisible" :before-close="handleClose">
        <el-form ref="loginform" :model="loginform" label-width="80px" status-icon :rules="rules" >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="loginform.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginform.password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="loginUser('loginform')">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="用户注册" :visible.sync="registerdialogVisible" :before-close="handleClose">
        <el-form ref="registerform" :model="registerform" label-width="80px" status-icon :rules="rule" >
          <el-form-item label="用户名" prop="name">
            <el-input v-model="registerform.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerform.password"></el-input>
          </el-form-item>
          <el-form-item label="学院" prop="college">
            <el-input v-model="registerform.college"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="class">
            <el-input v-model="registerform.class"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="registerdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="registerUser('registerform')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        if (this.loginform.checkName !== '') {
          this.$refs.loginform.validateField('checkPass')
        }
        callback()
      }
    }
    var checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.loginform.checkPass !== '') {
          this.$refs.loginform.validateField('checkPass')
        }
        callback()
      }
    }
    var pass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerform.pass !== '') {
          this.$refs.registerform.validateField('pass')
        }
        callback()
      }
    }
    return {
      dialogVisible: false,
      registerdialogVisible: false,
      src: require('../assets/logoN.png'),
      loginform: {
        name: '',
        password: ''
      },
      registerform: {
        name: '',
        password: '',
        college: '',
        class: ''
      },
      rules: {
        name: [
          { validator: checkName, trigger: 'blur' }
        ],
        password: [
          { validator: checkPass, trigger: 'blur' }
        ]
      },
      rule: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { validator: pass, trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请输入学院', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        class: [
          { required: true, message: '请输入班级', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    loginUser (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('login', this.loginform)
          if (res.code === 1) {
            this.$message({
              showClose: true,
              message: '错了哦，这是一条错误消息',
              type: 'error'
            })
          }
          if (res.code === 0) {
            window.sessionStorage.setItem('token', res.msg)
            window.sessionStorage.setItem('name', res.data)
            this.message({
              showClose: true,
              message: '登陆成功',
              type: 'success'
            })
            this.$router.push('/red')
          }
        } else {
          alert('submit!')
          return false
        }
      })
    },
    registerUser (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('注册成功！')
          this.registerdialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .outDiv {
    height: 100%;
    background-color: rgba(241,221,179);
    display: flex;  //流式布局
    align-items: center;  //上下居中
    flex-flow: row; //同一行
    .leftButtons {
      // background-color: red;
      height: 500px;
      width: 200px;
      margin-left: 60px;
      .leftButton {
        background-color: rgba(255, 255, 255, 0.3);
        height: 80px;
        width: 80px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
        border: 1px solid black;
        margin-left: 20px;
        cursor: pointer;
        .icon {
          font-size: 50px;
        }
        .content {
          font-size: 15px;
        }
      }
      .leftButton:hover {
        background-color: #fff;
      }
    }
    .rightImg {
      height: 100%;
      width: 900px;
      background-color: rgba(241,221,179);
      .myImg {
        margin-top: 10%;
        width: 100%;
        height: 200px;
      }
    }
    .right {
      height: 100%;
      width: 250px;
      background-color:rgba(241,221,179);
      .rightInformation {
        height: 500px;
        width: 100%;
        margin-top: 25%;
      }
    }
  }
  .el-menu-item {
    height: 125px;
    line-height: 56px;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
    font-size: 20px;
    background-color: rgba(241,221,179);
  }
</style>
